<template>
	<view>
		<tm-spin :load="load" tip="加载中" bgColor="rgba(255,255,255,0.4)" color="#2DB295">
		<o-navbarx :back="false" :isback="true" color="#000000" backgroundImage="/static/img/indexbg.png">
			<template #left_conent>
				<view class="bgfff pad-lr-20 pad-tb-14 radius-36 display-sb align-items mar-top-20 aa" @click="gosearch">
					<image src="/static/img/icon_sousuo.png" class="proudct-item-icon-24" mode=""></image>
					<input class="ipt fontSize-26 col-6" placeholder="搜索商品名称" type="text" disabled />
				</view>
			</template>
		</o-navbarx>
		<view class="index_bg_top poRe">
			<image src="/src/static/img/indexbg.png" class="width-100 poAb top-0 left-0" mode="widthFix"></image>
		<view class="display align-items flex-wrap pad-tb-20">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view id="demo1" class="scroll-view-item_H text-align-center width-20 mar-top-20" v-for="(item,index) in classify_list" :key="item.id" @click="change_one(item.id,index)">
					<view class="border-50 wid-hig-88 img_border" :class="select_one==item.id?'active':''">
						<image :src="item.image_text" class="border-50 wid-hig-88" mode=""></image>
					</view>
					<view class="fontSize-26 " :class="select_one==item.id?'col-C9951C':''">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		</view>
		<view class="bottom_view display align-items over-hid poRe">
			<view class="left_class height-100">
				<view class="tag_left display-ce align-items" v-for="(item,index) in  classify_list[current]?.son" :key="item.id" :class="select_two==item.id?'bgf6 col-C9951C':''" @click="change_two(item.id,index)">
					{{item.name}}
				</view>
			</view>
			<view class="right_class ml20 height-100">
				<view class="right_bottom">
					<scroll-view scroll-y="true" class="right_bottom" @scrolltolower="scrolltolower" lower-threshold="70">
					<view class="mar-top-30 pad-lr-20 pad-tb-20 radius-16 display" v-for="item in goods_list" :key="item.id" @click="gogoodsdetails(item.id)">
						<image :src="item.image_text" class="proudct-item-icon-10 radius-16" mode=""></image>
						<view class="ml20 righr_view">
							<view class=" display align-items fontSize-28">
								<text class="col-f tag_view_two radius-4 fontSize-22" v-if="item.is_limit==1">限购</text>
								<view class="text-clamp-1 fontSize-28">{{item.name}}</view>
							</view>
							<view class="display-sb align-items mar-top-20 fontSize-26">
								<text>销量{{item.total_sales>999?'999+':item.total_sales}}</text>
							</view>
							<view class="mar-top-22 fontSize-28 col-E23737"><text class="fontSize-20">￥</text>{{item.price}}</view>
						</view>
					</view>
					<view class="display-ce align-items" v-if="goods_list?.length==0||!goods_list">
						<tm-result :showBtn="false" subTitle=" " title="暂无数据" :followDark="false" color="#bc8c1e"></tm-result>
					</view>
					</scroll-view>
				</view>
			</view>
		</view>
		</tm-spin>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, ref,watch } from 'vue';
import {index,goodsList} from '../../utils/api'
onLoad(()=>{
	 _index()
})
onShow(()=>{
	if(uni.getStorageSync('classid')&&select_one.value){
		page.value = 1
		select_one.value =uni.getStorageSync('classid')
		select_two.value =''
		
		classify_list.value = []
		goods_list.value = []
		_index()
	}
})
const title_list = ref([
	{img:'/static/img/1.png',name:'乳饮酒水',id:1},
	{img:'/static/img/1.png',name:'乳饮酒水',id:2},
	{img:'/static/img/1.png',name:'乳饮酒水',id:3},
	{img:'/static/img/1.png',name:'乳饮酒水',id:4},
	{img:'/static/img/1.png',name:'乳饮酒水',id:5}
]),
keyword = ref(),//输入框关键字
classify_list = ref([]),
select_one = ref(),//选中的一级分类id
select_two = ref(),//二级分类id;

load = ref(false)
const page = ref(1)

const _index =(type:number) =>{
	index().then(res=>{
		if(res.code==1){
			classify_list.value = res.data.goods_class
			if(uni.getStorageSync('classid')){
				select_one.value =uni.getStorageSync('classid')
				 res.data.goods_class.forEach((item,index)=>{
					 if(item.id==uni.getStorageSync('classid')){
						 // select_two.value =item.son[0].id
						 current.value = index
					 }
				 })
				uni.removeStorageSync('classid')
			}else{
				select_one.value =res.data.goods_class[0].id
				select_two.value =res.data.goods_class[0].son[0]?.id
			}
			_goodsList()
		}
	})
}
const _goodsList = () =>{
	goodsList({	page:page.value,
				limit:10,
				class:select_two.value||select_one.value,
				keyword:keyword.value,
	}).then(res=>{
		if(res.code==1){
			load.value = false
			goods_list.value =goods_list.value.concat(res.data.goods.data)
			if(res.data.goods.data.length>0){
				page.value++
			}
		}
	})
}
const seach =() =>{
	_category_list()
}
const current = ref(0)
const change_one =(id:number,index:number) =>{
	current.value = index
	select_two.value =''
	select_one.value = id
	goods_list.value = []
	page.value= 1
	load.value = true
	_goodsList()
}
const current1 = ref(0)
const change_two =(id:number,index:number) =>{
	current1.value = index
	select_two.value = id
	goods_list.value = []
	page.value= 1
	load.value = true
	_goodsList()
}
const two_list = ref()

const goods_list = ref([])

const scrolltolower = () =>{
	console.log(4444,'hhhh')
	if(page.value>1){
		_goodsList()
	}
}
const gogoodsdetails =(id:number) =>{
	uni.navigateTo({
		url:'/indexpages/goodsDetail/goodsDetail?id='+id
	})
}
const gosearch =() =>{
	uni.navigateTo({
		url:'/indexpages/search/search'
	})
}
const goshopgoods = (id) =>{
	uni.navigateTo({
		url:'/indexpages/shopgoods/shopgoods?id='+id
	})
}
</script>

<style lang="scss">
@import 'classification.scss';
</style>
